<template>
  <div class="user">
    <el-row class="user-title pl-15">
      <span>{{ title }}</span>
    </el-row>
    <el-row class="user-search pl-15">
      <el-col :span="4">
        <el-input v-model="searchName" placeholder="姓名"></el-input>
      </el-col>
      <el-col :span="19" :offset="1">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="register">注册</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row class="user-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系方式">
        </el-table-column>
        <el-table-column
          prop="admissionTime"
          label="入司时间">
        </el-table-column>
        <el-table-column
          prop="address"
          label="家庭地址">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生年月">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state==='0SA'">正常</span>
            <span v-else>注销</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="editorForm(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="user-table-pagination">
      <el-pagination
        @current-change="onCurrentChange"
        layout="prev, pager, next, jumper"
        :page-size="pageObj.pageSize"
        :total="pageObj.total">
      </el-pagination>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"
               :close-on-click-modal="false"
               custom-class="user-form">
      <el-form :model="form" label-width="100px" :rules="rules" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="form.username" :disabled="userObj.username===form.username || operFlag===2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker class="w100" v-model="form.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="tel">
              <el-input v-model="form.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入司时间" prop="admissionTime">
              <el-date-picker class="w100" v-model="form.admissionTime" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-select class="w100" v-model="form.state">
                <el-option value="0SA" label="正常"></el-option>
                <el-option value="0SB" label="注销"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="userObj.username === 'admin'">
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授权状态" prop="root" title="授权该员工管理员工信息模块">
              <el-radio-group v-model="form.root">
                <el-radio :label="1">授权</el-radio>
                <el-radio :label="0">不授权</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <app-foot></app-foot>
  </div>
</template>

<script>
import api from '../api';
import AppFoot from '../components/app-foot';

export default {
  name: 'user-info',
  components: {AppFoot},
  props: {
    userObj: Object
  },
  data() {
    const regStr = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    const validatePwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (!value.match(regStr)) {
        callback(new Error('密码至少6位，且需由字母和数字组成'));
      } else {
        callback();
      }
    };
    return {
      dialogTitle: '',
      form: {
        username: '',
        tel: '',
        admissionTime: '',
        address: '',
        state: '0SA',
        birthday: '',
        password: '123456',
        root: 0
      },
      rules: {
        username: [
          { required: true, message: '员工姓名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePwd, trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' }
        ],
        admissionTime: [
          { required: true, message: '入司时间不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '联系地址不能为空', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      title: '员工管理',
      searchName: '',
      pageObj: {
        page: 1,
        pageSize: 8,
        total: 0
      },
      tableData: [],
      operFlag: 0
    };
  },
  computed: {
  },
  created() {
    this.initData();
  },
  methods: {
    closeDialog() {
      this.initData();
      this.dialogFormVisible = false;
    },
    initData() {
      api.getAllUsers(this.pageObj).then((users) => {
        this.tableData = users.data;
        this.pageObj.total = users.total;
      });
    },
    onSearch() {
      this.pageObj.page = 1;
      const params = {
        ...this.pageObj,
        username: this.searchName
      };
      api.findUserByName(params).then((users) => {
        this.tableData = users.data;
        this.pageObj.total = users.data.length;
      });
    },
    onCurrentChange(page) {
      this.pageObj.page = page;
      this.initData();
    },
    deleteUser(form) {
      this.$confirm('您确定要删除此用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        api.deleteUser({id: form.id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.initData();
        });
      });
    },
    editorForm(form) {
      this.operFlag = 2;
      this.dialogTitle = `${form.username}信息修改`;
      this.dialogFormVisible = true;
      this.form = form;
    },
    register() {
      this.dialogTitle = '员工注册';
      this.form = {
        username: '',
        tel: '',
        admissionTime: '',
        address: '',
        state: '0SA',
        birthday: '',
        password: '',
        root: 0
      };
      this.operFlag = 1;
      this.dialogFormVisible = true;
    },
    reset() {
      this.pageObj.page = 1;
      this.searchName = '';
      this.initData();
    },
    submitForm(form) {
      if (this.operFlag === 1) { // 注册
        this.$refs[form].validate((valid) => {
          if (valid) {
            api.addStaff(this.form).then((data) => {
              if (data.flag === 0) {
                this.$message({
                  type: 'warning',
                  message: data.message
                });
              } else {
                this.$message({
                  type: 'success',
                  message: data.message
                });
                this.dialogFormVisible = false;
                this.initData();
              }
            });
          } else {
            this.$message({
              type: 'warning',
              message: '注册信息有误，请仔细检查重新填写'
            });
            return false;
          }
        });
      } else if (this.operFlag === 2) { // 编辑
        api.updateUser(this.form).then((data) => {
          if (data.flag === 0) {
            this.$message({
              type: 'warning',
              message: data.message
            });
          } else {
            this.$message({
              type: 'success',
              message: data.message
            });
            this.dialogFormVisible = false;
            this.initData();
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .pl-15 {
    padding-left: 15px;
  }
  .user {
    height: 100%;
    &-title {
      height: 40px;
      margin: 0 auto;
      width: 98%;
      line-height: 40px;
    }
    &-search {
      height: 60px;
      margin: 0 auto;
      width: 96%;
      line-height: 60px;
      background-color: #F1F2F7;
    }
    &-table {
      margin: 0 auto;
      margin-top: 15px;
      width: 96%;
      max-height: 50%;
      overflow: auto;
      /*min-height: 60%;*/
      &-pagination {
        margin: 0 auto;
        margin-top: 15px;
        width: 96%;
      }
    }
  }
</style>
